<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, genFileId } from 'element-plus'
import type {
  UploadFile,
  UploadFiles,
  UploadInstance,
  UploadProps,
  UploadRawFile,
} from 'element-plus'

const sqlString = ref<string>('')
const upload = ref<UploadInstance>()
const uploadFile = ref<UploadRawFile>()
const markdownString = ref<string>('# Hello')

const handleExceed: UploadProps['onExceed'] = (files) => {
  console.log('========tools 页面超出限制，只允许上传一个文件=========')
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  console.log(uploadFile.value)
  upload.value!.handleStart(file)
}

const submitUpload = async () => {
  console.log('======工具类tools 上传文件=====')
  console.log(uploadFile.value)
  if (uploadFile.value === undefined || uploadFile.value === null) {
    ElMessage({
      type: 'error',
      message: '请选择一个文件',
    })
    return
  }
  const blob = await fileToBlob(uploadFile.value)
  // 开始上传
  SqlConvertControllerService.convertFileSqlToMarkdown({
    file: blob,
  }).then((res) => {
    if (res.code === 200) {
      if (res.data !== undefined) {
        markdownString.value = res.data
      }
    } else {
      ElMessage({
        type: 'error',
        message: res.message,
      })
    }
  })
}

const handleChange = (uploadFile1: UploadFile, uploadFiles: UploadFiles) => {
  console.log('======工具页面tools 处理handleChange=======')
  uploadFile.value = uploadFile1.raw
}

const copy = async () => {
  try {
    await navigator.clipboard.writeText(markdownString.value)
    ElMessage({
      type: 'success',
      message: '已经复制到剪切板',
    })
  } catch (err) {
    console.error('无法复制文本: ', err)
  }
}

async function uploadOnEnter() {
  if (isNull(sqlString.value)) {
    ElMessage({
      type: 'error',
      message: '请输入正确的字符串',
    })
  }
  SqlConvertControllerService.convertSqlToMarkdown({
    sql: sqlString.value,
  }).then((res) => {
    if (res.code === 200) {
      if (res.data !== undefined) {
        markdownString.value = res.data
      }
    } else {
      ElMessage({
        type: 'error',
        message: res.message,
      })
    }
  })
}
</script>

<template>
  <div class="toMarkdown-container">
    <el-card class="toMarkdown">
      <el-row>
        <el-col :span="12">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :limit="1"
            :on-change="handleChange"
            :on-exceed="handleExceed"
            :auto-upload="false"
          >
            <template #trigger>
              <el-button type="primary">请选择一个文件</el-button>
            </template>
            <el-button class="ml-3" type="success" @click="submitUpload"> 上传到服务器 </el-button>
            <template #tip>
              <div class="el-upload__tip text-red">限制一个文件，上传一个文件会覆盖上一个文件</div>
            </template>
          </el-upload>
        </el-col>

        <el-col :span="12">
          <el-button type="primary" @click="copy">复制到剪切板</el-button>
        </el-col>
      </el-row>
      <el-row class="toMarkdown-body" :gutter="12">
        <el-col :span="12">
          <el-input
            type="textarea"
            style="width: 100%; height: 100%"
            :rows="20"
            placeholder="请输入内容, 按回车即可上传"
            v-model="sqlString"
            @keydown.enter.prevent="uploadOnEnter"
          ></el-input>
        </el-col>
        <el-col :span="12">
          <MdViewer :value="markdownString"></MdViewer>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.toMarkdown-container {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background-color: #f5f7f8;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
}

.toMarkdown {
  margin: 0 auto;
  min-height: calc(100vh - 40px);
  width: 100%;
  max-width: 1200px;
  padding: 20px;
}

.toMarkdown-body {
  width: 100%;
}
</style>
